import React, { forwardRef } from 'react';

// Shield Outlined Icon
export const ShieldOutlined = forwardRef((props, ref) => (
  <span ref={ref} role="img" aria-label="shield" {...props} className={`anticon ${props.className || ''}`}>
    <svg viewBox="64 64 896 896" focusable="false" data-icon="shield" width="1em" height="1em" fill="currentColor" aria-hidden="true">
      <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 824H232V196h560v692z" />
      <path d="M484 616c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-204h-64v204z" />
      <path d="M484 380a64 64 0 10128 0 64 64 0 10-128 0z" />
    </svg>
  </span>
));

// Statistic Component
export const Statistic = (props) => (
  <div className="ant-statistic">
    <div className="ant-statistic-title">{props.title}</div>
    <div className="ant-statistic-content">
      {props.prefix && <span className="ant-statistic-content-prefix">{props.prefix}</span>}
      <span className="ant-statistic-content-value" style={props.valueStyle || {}}>
        {props.precision !== undefined ? 
          parseFloat(props.value).toFixed(props.precision) : 
          props.value}
      </span>
      {props.suffix && <span className="ant-statistic-content-suffix">{props.suffix}</span>}
    </div>
  </div>
);

// Video Camera Outlined Icon
export const VideoCameraOutlined = forwardRef((props, ref) => (
  <span ref={ref} role="img" aria-label="video-camera" {...props} className={`anticon ${props.className || ''}`}>
    <svg viewBox="64 64 896 896" focusable="false" data-icon="video-camera" width="1em" height="1em" fill="currentColor" aria-hidden="true">
      <path d="M912 302.3L784 376V224c0-35.3-28.7-64-64-64H128c-35.3 0-64 28.7-64 64v576c0 35.3 28.7 64 64 64h592c35.3 0 64-28.7 64-64V648l128 73.7c21.3 12.3 48-3.1 48-27.6V330c0-24.6-26.7-40-48-27.7zM712 792H136V232h576v560zm176-167l-104-59.8V458.9L888 399v226z" />
    </svg>
  </span>
));

// Safety Outlined Icon
export const SafetyOutlined = forwardRef((props, ref) => (
  <span ref={ref} role="img" aria-label="safety" {...props} className={`anticon ${props.className || ''}`}>
    <svg viewBox="64 64 896 896" focusable="false" data-icon="safety" width="1em" height="1em" fill="currentColor" aria-hidden="true">
      <path d="M512 64L128 192v384c0 212.1 171.9 384 384 384s384-171.9 384-384V192L512 64zm312 512c0 172.3-139.7 312-312 312S200 748.3 200 576V246l312-110 312 110v330z" />
      <path d="M378.4 475.1a35.91 35.91 0 00-50.9 0 35.91 35.91 0 000 50.9l129.4 129.4 2.1 2.1a33.98 33.98 0 0048.1 0L730.6 434a33.98 33.98 0 000-48.1l-2.8-2.8a33.98 33.98 0 00-48.1 0L483 579.7 378.4 475.1z" />
    </svg>
  </span>
));

// 创建图标组件集合
const IconComponents = {
  ShieldOutlined,
  Statistic,
  VideoCameraOutlined,
  SafetyOutlined
};

// 导出图标组件集合
export default IconComponents; 